Pipes

Como utilizar el operador de pipe "|" para convertir datos, darles formato...etc

Pagina referencia sobre pipes de Angular

Podemos usar las pipes para transformar los datos de muchas maneras, un ejemplo es con el tipo Date:

Si tenemos una variable fecha definida de la siguiente manera

fecha: Date = new Date(2021,1,20);

Al imprimirla dentro de nuestro componente tal que asi:

{{fecha}}

Obtenemos una salida como esta:

Sat Feb 20 2021 00:00:00 GMT+0100 (Central European Standard Time)

Aplicando el pipe date

Si queremos formatear dicha salida podemos usar un pipe de esta manera:

{{fecha | date:"MM/dd/yy"}}

y la salida quedará de la siguiente manera:

02/20/21

Otros pipes

Los mas comunes son:

• uppercase: para formatear un string a todo letras mayusculas
• lowercase: para formatear un string a todo letras minisculas
• currency: para formatear un numero a tipo monetario
• number: para formatear numeros de tipo decimal
• percent: para formatear numeros como porcentajes

Podemos utilizar Custom Pipes, para poder hacer filtros o manejar los datos de la manera que nosotros queramos.

Para utilizar las Custom Pipes lo hacemos de la siguiente manera:

• Generamos el archivo de la pipe (exponential.pipe.ts):

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exp'})
export class ExponentialPipe implements PipeTransform {
  transform(value: number, exponent = 1): number {
    return Math.pow(value, exponent);
  }
}

En este caso solo es una funcion que hace el exponencial del numero que le pasemos.

• Importamos la clase de la pipe en el archivo app.module.ts

• Implementamos la pipe en uno de nuestros componentes:

{{ 2 | exp: 5 }}

Como generar una custom pipe

Una custom pipe es tal que asi:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exp'})
export class ExponentialPipe implements PipeTransform {
transform(value: number, exponent = 1): number {
  return Math.pow(value, exponent);
}
}

en la funcion transform indicamos los parametros que recibirá la pipe:

transform(value: number, exponent = 1): number

El primer parametro es el que recibe de la pipe en si, y los siguientes parametros son los que indicamos despues de la pipe:

{{ 3 | exp: 2 }}

En este caso el valor 3 sería el parámetro value, el valor 2 sería exponent.

Si tuviesemos una funcion transofrm como esta:

transform(value: number, exponent = 1, suma = 0): number

NOTA: El valor que le pasamos a los parametros en la delaración de la funcion es el valor que cogen por defecto en caso de que no se pasen en el pipe

{{ 3 | exp: 2: 4 }}

En este caso el valor 3 sería el parametro value, el valor 2 sería exponent y el valor 4 seria suma.

Angular | Pipes